<template>
<div class=''>
    <!-- 提示框 -->
    <el-tooltip class="item" :show="isShowTip" effect="dark" content="toolContent" placement="bottom"></el-tooltip>
    <!-- 移入某个元素触发显示跟随提示框显示-->
    <div class="red" @mouseover="mouseenter($event.target.innerText)" @mouseleave="hideTip">
        <p>The current baseline outlook for suggests</p>
    </div>
</div>
</template>

<script>
export default {
data() {
    return {
        isShowTip: false,
        tipContent: ""
    };
},
mounted() {
    this.mouseFllow();
},
methods: {
    showTip(text = "") {
        this.tipContent = text;
        this.isShowTip = true;
    },
    hideTip() {
        this.isShowTip = false;
    },
    mouseFllow() {
    // 鼠标跟随tip
    var sgTip = document.querySelector("el-tooltip");
    document.onmousemove = function (e) {
        var x = e.pageX,
            y = e.pageY,
            offset = 20;
        sgTip.style.left = x + offset + "px";
        sgTip.style.top = y + offset + "px";
    };
}
}
};

</script>
<style lang='scss' scoped>

</style>